<template>
  <div class="mine-information">
    <!-- 顶部导航栏 -->
    <van-sticky>
      <van-nav-bar
        title="个人信息"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <!-- 主体内容 -->
    <div class="information-contanier">
      <!-- 头像 -->
      <van-cell title="头像" size="large" is-link center>
          <template #default>
            <van-image round width="100" height="100" :src="img" />
          </template>
      </van-cell>
      <!-- 昵称 -->
      <van-cell
        value="修改昵称"
        size="large"
        is-link
        center
        to="/changeusername"
      >
        <template #title>
          {{ msg }}
        </template>
        
      </van-cell>
      <!-- 收货地址 -->
      <van-cell title="收货地址" value="修改收货地址" is-link />
      <!-- 切换账号&退出登录 -->
      <van-button type="default" size="large" color="#f7d247" to="/login"
        >确定更改</van-button
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "",
      img:'',
    };
  },
  created() {
    if (this.User.nick) {
      this.msg = this.User.nick;
      this.img = this.User.headerimg;
    }
  },
  computed: {
    User() {
      return this.$store.getters.getUser;
    },
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.mine-information {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  //   主体内容
  .information-contanier {
    flex-grow: 1;
    overflow: auto;
    background: rgb(220, 220, 218);
    .van-cell {
      width: 90%;
      margin: 20px auto;
      border-radius: 10px;
    }
    .van-button {
      width: 90%;
      margin: 20px 16px;
      border-radius: 10px;
    }
  }
}
</style>
